<template>
  <view class="home">
    <view class="header">
      <Nav :isBack="false" title="我是标题"></Nav>
      <view class="wrap">
        <view
          class="item u-border-bottom"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ "第" + item + "条数据" }}
        </view>
        <u-loadmore :status="status" />
      </view>
    </view>
    <!-- <view class="home-content">
      <view v-for="(item, index) in list" :key="index">
        {{ item }}
      </view>
    </view> -->
    <MyTabbar />
  </view>
</template>

<script>
import Nav from "@/components/Nav";
import MyTabbar from "@/components/MyTabbar";
import { historyPush } from "@/utils";

export default {
  components: {
    MyTabbar,
    Nav,
  },
  data() {
    return {
      status: "loadmore",
      list: 15,
      page: 0,
    };
  },

  mounted() {},
  methods: {
    historyPush,
    onReachBottom() {
      if (this.page >= 3) return;
      this.status = "loading";
      this.page = ++this.page;
      setTimeout(() => {
        this.list += 20;
        if (this.page >= 3) this.status = "nomore";
        else this.status = "loading";
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap {
		padding: 24rpx;
	}
	
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
</style>
